<template>
  <div class="mimg fitw">
    <div class="img" :style="{'background-image': `url(${src})`, 'padding-top': ratio * 100 + '%'}"></div>
  </div>
</template>
<script>
  export default {
    props: {
      ratio: {
        type: [Number, String],
        default: 0.75
      },
      src: String
    },
    data() {
      return {}
    },
    computed: {},
    methods: {},
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
  %gg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .mimg {
    height: auto;
    overflow: hidden;
    display: inline-block;
    // background-image: url("图片-填充.svg");
    background-color: #f0f0f0;
    @extend %gg;
    .img {
      @extend %gg;
    }
  }
</style>
